<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>登录注册页面</title>
    <link rel="stylesheet" href="assets/css/login.css">
    <link rel="stylesheet" href="assets/css/demo.css">
</head>
<script src="assets/js/jquery-3.4.1.min.js"></script>

<script src="assets/js/ban.js"></script>
<script src="assets/js/api.js"></script>>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body>
<canvas class="cavs" width="1575" height="1337"></canvas>

<div class="loginmain" id="app">

    <section id="content">
        <div class="content-header clearfix">
            <a href="javascript:;" class="current">登陆</a>
        </div>

        <div class="content-body">
            <div class="dom" style="display: block">

                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="用户名"  prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码"  prop="password">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="login()">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>

                <div class="dom-footer">
                    <div class="login-another">

                        <span>还没有注册帐号?</span>
                        <a href="#">立即注册</a>
                    </div>
                </div>

            </div>

        </div>
    </section>

</div>

    <script>
        new Vue({
            el: '#app',
            data: {
               form:{
                   name:"",
                   password:"",
                   tel:"",
                   name:""
               },
                rules:{
                    username:{ required: true, message: '请输入用户名', trigger: 'blur' },
                    password:{ required: true, message: '请输入密码', trigger: 'blur' },
                    name:{ required: true, message: '请输入姓名', trigger: 'blur' },

                }
            }
            , created(){

            }
            , methods: {
                login() {
                    api.post("/manager/login",this.form).then(res=>{
                        if(res.state){
                            sessionStorage.setItem("user",JSON.stringify(res.data));
                            location.href="index.html"
                        }else{
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'error'
                            });
                        }

                        console.log(res)
                    }).catch(res=>{
                        this.$message({
                            showClose: true,
                            message: "服务器异常,请稍后再试",
                            type: 'error'
                        });
                    })
                },

                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        })

    </script>


    <script>

       
        $(function(){
            let as = document.getElementsByClassName('content-header')[0].getElementsByTagName('a');

            let contents = document.getElementsByClassName('dom');

            // 1.2 遍历
            for (let i = 0; i < as.length; i++) {
                // 1.2.1 取出单个对象
                let a = as[i];
                a.id = i;

                // 1.2.2 监听鼠标的移动事件
                a.onclick = function () {
                    // 让所有的a的class都清除
                    for (let j = 0; j < as.length; j++) {
                        as[j].className = '';
                        contents[j].style.display = 'none';
                    }

                    // 设置当前a的class
                    this.className = 'current';
                    // 从contents数组中取出对应的标签
                    contents[this.id].style.display = 'block';
                }

            }
        })

    </script>

</body>
</html>

